import React, {FC, useContext} from 'react';
import "./HxJournalMailItem.less";
import default_art_cover from "@/assets/default_art_cover.png";
import {FormattedMessage, Link} from "umi";
import * as API from "@/services";
import {HxConfigContext} from "@/layouts/HxConfigContext";
import {Image} from "antd";
import {correspVal} from "@/utils/biz";

interface HxJournalMailItemProps {
  journal: API.FrontJournal
}

const HxJournalMailItem: FC<HxJournalMailItemProps> = (props) => {
  const {journal} = props;
  const {isZhCN} = useContext(HxConfigContext)

  return (
    <Link to={`/mall/product/${journal?.id}`} className={"hx-journal-mail-item-container"}>
      <div className={"hx-journal-mail-item-cover"}>
        <Image src={journal?.journalCoverPathUrl} fallback={default_art_cover} preview={false}/>
      </div>
      <div className={"hx-journal-mail-item-content"}>
        <div className={"hx-journal-mail-item-title"} title={correspVal(isZhCN, journal?.journalNameCn, journal?.journalNameEn)}>
          {correspVal(isZhCN, journal?.journalNameCn, journal?.journalNameEn)}
        </div>
        <div className={"hx-journal-mail-item-price"}>
          <div className={"hx-journal-mail-item-discount-price"}>
            <span className={"jm-currency"}>￥</span>{journal?.regularPrice}<span className={"jm-desc"}>
                      <FormattedMessage id="mall.starting-price-indicator"/>
                        </span>
          </div>
          {/* <div className={"hx-journal-mail-item-original-price"}>
                        ￥45.00
                    </div>*/}
        </div>
      </div>
    </Link>
  );
};

export default HxJournalMailItem;
